<template>
  <el-dialog
    v-model="dialogVisible"
    :title="editId ? '编辑菜单' : '新增菜单'"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      :model="menuForm"
      status-icon
      :rules="rules"
      ref="menu-Form"
      label-width="100px"
      class="demo-menuForm"
    >
      <el-form-item label="上级编号" prop="pid">
        <el-select v-model="menuForm.pid">
          <el-option :value="0" label="顶级菜单"></el-option>
          <el-option
            v-for="menu in menus.menuList"
            :key="menu.id"
            :value="menu.id"
            :label="menu.title"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单类型" prop="type">
        <el-radio
          v-model="menuForm.type"
          :label="1"
          :disabled="menuForm.pid !== 0"
          >目录</el-radio
        >
        <el-radio
          v-model="menuForm.type"
          :label="2"
          :disabled="menuForm.pid === 0"
          >菜单</el-radio
        >
      </el-form-item>
      <el-form-item label="菜单名称" prop="title">
        <el-input
          v-model="menuForm.title"
          placeholder="请输入菜单名称"
          auto-complete="off"
        />
      </el-form-item>
      <!-- <el-form-item label="菜单图标" prop="icon">
        <el-select v-model="menuForm.icon">
          <el-option v-for="icon in micons" :key="icon" :value="icon">
            <i :class="icon" style="font-size: 22px"></i>
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="菜单图标" prop="icon">
        <el-input
          v-model="menuForm.icon"
          placeholder="请输入菜单图标"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="菜单链接" prop="url">
        <el-input
          v-model="menuForm.url"
          placeholder="请输入菜单链接"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="菜单状态" prop="status">
        <el-radio v-model="menuForm.status" :label="1">启用</el-radio>
        <el-radio v-model="menuForm.status" :label="2">禁用</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="submitMenus()"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
// 导入store
import useMenuStore from "../../stores/menus.js";
const menus = useMenuStore();
// 定义控制弹窗显隐的变量
const dialogVisible = ref(false);
// 接收父组件传来的值
// const props = defineProps(["dialog"]);

//关闭弹窗？
const handleClose = (done) => {
  ElMessageBox.confirm("确定关闭吗?", "关闭弹窗！", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      done();
      //   重置表单
      resetForm();
    })
    .catch(() => {
      // catch error
    });
};

// 关闭弹窗
const closeDialog = () => {
  resetForm();
};
// 定义菜单表单
let menuForm = reactive({
  pid: 0,
  type: 1, // 1 目录， 2 菜单
  title: "", // 标题
  icon: "", // 图标
  url: "", // 链接
  status: 1, // 1 可用  2 禁用
});
// 定义编辑id
let editId = ref("");

// 表单规则
const rules = reactive({
  pid: { required: true, message: "请选择上级菜单", trigger: "blur" },
  type: { required: true, message: "请选择菜单类型", trigger: "blur" },
  title: { required: true, message: "请输入菜单标题", trigger: "blur" },
  icon: { required: true, message: "请输入菜单图标", trigger: "blur" },
  url: { required: true, message: "请输入菜单链接", trigger: "blur" },
  status: { required: true, message: "请选择菜单状态", trigger: "blur" },
});

// 清空表单，关闭弹窗
const resetForm = () => {
  // 重置编辑id
  editId = ref("");
  // 初始化表单
  menuForm = reactive({
    pid: 0,
    type: 1, // 1 目录， 2 菜单
    title: "", // 标题
    icon: "", // 图标
    url: "", // 链接
    status: 1, // 1 可用  2 禁用
  });
  // 关闭弹窗
  dialogVisible.value = false;
};
// 提交菜单
const submitMenus = () => {
  //   console.log("menuForm", menuForm);
  //   console.log("editId", editId);
  if (editId.value) {
    menus.editMenuListActions({ ...menuForm, id: editId.value });
  } else {
    menus.addMenusListActions(menuForm);
  }
  resetForm();
};
// onMounted(() => {
//   console.log("editId", editId);
// });
// 接收父组件数据
const acceptValue = (value) => {
  //   console.log("value", value);
  editId.value = value.id;
  menuForm = reactive({ ...value });
};
// 将变量与函数暴露出来,此代码片段放到下面
defineExpose({
  dialogVisible,
  acceptValue,
});
</script>

<style lang="css" scoped>
.el-select {
  width: 100%;
}
</style>
